 <template>
    <page class="index">
        <div class="content">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
        <ul class="tabBar">
            <router-link active-class="routerActiveClass" tag="li" :to="{name:'movie'}"><span class="iconfont icon-dianying"></span>电影</router-link>
            <router-link active-class="routerActiveClass" tag="li" :to="{name:'cinema'}"><span class="iconfont icon-yingyuana"></span>影院</router-link>
            <router-link active-class="routerActiveClass" tag="li" :to="{name:'boxoffice'}"><span class="iconfont icon-ranking"></span>票房</router-link>
            <router-link active-class="routerActiveClass" tag="li" :to="{name:'my'}"><span class="iconfont icon-My"></span>我的</router-link>
        </ul>
    </page>
</template>

<script>

export default {
    name:"index",
    data(){
        return {
            
        }
    },
    
    
    created(){
       
        
    }
    
   
}
</script>

<style lang="scss" scoped>
@import "../assets/css/comm.scss";
.index{
    @include flexbox(column);
    .content{
        flex:1;
        overflow: auto;
        @include flexbox(column);
    }
    .tabBar{
        @include flexbox();
        height:1.1rem;
        border-top: 1px solid lightgray;
        justify-content: space-around;
        >li{
            @include flexbox(column);
            justify-content: center;
			font-size: .24rem;
			align-items: center;
            .iconfont{
                font-size: .50rem;
            }
        }
    }
}
.routerActiveClass{
    color:$primaryColor;
}

</style>
